<template  lang="pug">
.main
  title.title
  el-form#form(:model='modelRef', :rules='rulesRef', ref='formRef')
    el-form-item(prop='username')
      el-input(
        v-model='modelRef.username',
        placeholder='请输入用户名',
        @keydown.enter='handleSubmit'
      )
        template(#prefix) 
          i.el-icon-user.el-input__icon
    el-form-item(prop='password')
      el-input(
        v-model='modelRef.password',
        type='password',
        placeholder='请输入密码',
        @keydown.enter='handleSubmit'
      )
        template(#prefix) 
          i.el-icon-unlock.el-input__icon
    el-form-item
      el-button.submit(
        type='primary',
        @click='handleSubmit',
        :loading='submitLoading'
      ) 登录
</template>


<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
  getCurrentInstance,
  computed,
} from 'vue'
import { ElForm, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { User } from './User'
import { CurrentUser as UserStoreType } from '@/store/user'

interface UserLoginSetupData {
  modelRef: User;
  rulesRef: any;
  formRef: typeof ElForm;
  submitLoading: boolean;
  handleSubmit: () => any; // Promise<void>;
  loginStatus?: 'ok' | 'error';
}

export default defineComponent({
  setup(): UserLoginSetupData {
    const router = useRouter()
    //获取当前路由
    const { currentRoute } = router
    const modelRef = reactive<User>({
      username: 'admin',
      password: '123456',
    })

    const rulesRef = reactive({
      username: {
        required: true,
        message: '请输入用户名',
        trigger: 'blur',
      },
      password: {
        required: true,
        message: '请输入密码',
        trigger: 'blur',
      },
    })
    // const store = useStore<{userlogin: UserLoginStateType}>();
    const submitLoading = ref<boolean>(false)
    // form
    const formRef = ref<typeof ElForm>()
    // const appConfig = getCurrentInstance()?.appContext.config.globalProperties

    const store = useStore<{ userlogin: UserStoreType }>()
    const handleSubmit = async () => {
      submitLoading.value = true
      try {
        //验证
        const valid: boolean | undefined = await formRef.value?.validate()
        if (valid) {
          const res = await store.dispatch('user/login', modelRef)

          if (res) {
            ElMessage.success('登录成功！') 
            // await store
            //   .dispatch('user/getUserInfo')
            //   .then((resp) => {
            //     resp.forEach((route: any) => {
            //       router.addRoute(route)
            //       router.options.routes.push(route)
            //     })
                router.push({ path: '/index' }) 
              // })
              // .catch((error) => {
              //   console.log(error)
              // })
            
          } else {
            ElMessage.warning('登录失败！')
          }
        }
      } catch (error) {
        ElMessage.error(error)
      }
      submitLoading.value = false
    }

    const loginStatus = computed<'ok' | 'error' | undefined>(
      () => store.state.userlogin.loginStatus || undefined
    )

    return {
      modelRef,
      rulesRef,
      submitLoading: (submitLoading as unknown) as boolean,
      handleSubmit,
      formRef: (formRef as unknown) as typeof ElForm,
      // loginStatus: loginStatus as unknown as "ok"|"error"|undefined
    }
  },
})
</script>

<style lang="scss">
@import './user.scss';
</style>